﻿!(function( R, RD, $, d ){
		'use strict';

		let
		
		/**
     * Back组件包含返回按钮
     * 无需接受props
     */
		Back = R.createClass({
			// 检测是否登陆
			'componentDidMount': function(){
					if(!sessionStorage.userid || !sessionStorage.username)
						$(this.refs.errtip).text('不正常访问，请返回主页登陆！').show();
			},
			'render': function(){
					return (
						<div className="head">
							<button><a href="../../index.html">返回</a></button>
							<span ref="errtip" id="errtip"></span>
						</div>
					);
			}
		}),
		
		/**
     * CardHistory组件：用户某一次历史刷卡异常记录
     * @props  record  一条异常记录
     * @props  no  异常记录的唯一序号
     */
		CardHistory = R.createClass({
			// 点击申诉按钮
			'appeal': function(e){
      	$('#apply').attr('data-cur', $(e.target).attr('data-no')).show() 
      							.children('p[data-type="errinfo"]').text('');
      },
			'render': function(){
				let props = this.props,
						record = props.record,
						no = props.no,
						info = record.Class_No + '_'
									+ record.WaterDate + '_'
									+ record.JT_No + '_'
									+ record.RBH + '_'
									+ record.Term_No + '_'
									+ record.Status + '_'
									+ record.SBH;
				return (
					<div className="record" data-info={ info }>
						<p className="">{ record.WaterDate }</p>
						<span className="course">{ record.S_Name }</span>
						<span className="state">{ record.Status === 3 ? '缺勤' : '迟到'}</span>
						<span className="appeal" data-no={no} onClick={ this.appeal }>申诉</span>
					</div>
				);	
			}
		}),
		
		/**
     * ExceptionCourses组件: 用户历史刷卡异常记录
     * @props  courses  异常记录
     */
		ExceptionCourses = R.createClass({
			'render': function(){
					let courses = this.props.courses;
					return (
						<div className="exception">
								{
										courses.map(function(e, i){
												return <CardHistory record={e} key={i} no={i}/>;
										})
								}
						</div>
					);	
			}
		}),
			
		/**
     * UserRecord组件包涵用户名和用户历史刷卡记录
     * 无需接受props
     */
    UserRecord = R.createClass({
        'getInitialState': function getInitialState() {
            return {
                'ajaxQueue': {},
                'loadbarQueue': {}
            };
        },
        'componentDidMount': function(){
        		this.Queue();
        
        		let ele = this.refs.a;
            $('body').click(function(e){
        			let tar = e.target;
    					if($(ele).css('display') === 'none' || tar.parentNode === ele || tar === ele || tar.className === 'sub') return;
        			$(ele).hide();
        		});
        },
        'apply': function(){
        		let contentele = this.refs.a,
        				errele = $(contentele).children('p'),
        				reason = $(contentele).children('textarea').val().trim();
        				
        		if(reason.length <= 5){
        				errele.text('错误：申诉理由不得少于5个字！');
        				return ;
        		}
        		
        		let status = $('.apply input[type="radio"]:checked').val();
        		if(!status){
        				errele.text('错误：请选择一个状态！');
        				return ;
        		}
        		
        		let no = +$(this.refs.a).attr('data-cur'),
        				data = $($('.record')[no]).attr('data-info').split('_');
        				
        		$.ajax({
        				'url': 'https://corefuture.cn/creatshare_zhjs/attend/appeal.action',
        				'type': 'POST',
        				'dataType': 'json',
                'crossDomain': true,
								'xhrFields': { 
										withCredentials: true 
								},
        				'data': {
        					'class_No': data[0],
        					's_Date': data[1],
        					'jc': data[2],
        					'r_BH': data[3],
        					'term': data[4],
        					'remark': reason,
        					's_Status': data[5],
        					'a_Status': status,
        					's_Code': data[6]
        				},
        				'success': function(data){
        				
        						errele.text('提交中……');
        						
        						if(data.total && data.total === -2){
        							$(contentele).hide();
        							$('#errtip').text('不正常访问，请返回主页登陆！').show();
        							
        							return;
        						}
        						if(!data.IsSucceed){
        							errele.text('错误：已申诉，不可重复申诉！');
        							return;
        						}
        						
        						$(contentele).hide();
        				}
        		});
        },
        'cancel': function(){
        		$(this.refs.a).hide().children('textarea').val('');
        },
        // 发ajax
        'Queue': function Queue() {
        		var that = this;
        		return $.ajax({
                'url': 'https://corefuture.cn/creatshare_zhjs/attend/getMonthAttend.action',
                'type': 'POST',
                'dataType': 'json',
                'crossDomain': true,
								'xhrFields': { 
										withCredentials: true 
								},
                'data': {
                	'rows': 80,
                	'page': 1,
                	'flag[0]': 2,
                	'flag[2]': 3
                },
                'success': function success(data) {
                		if(data.total <= 0){
                			RD.render(<h3>Your Card is normal!</h3>, that.refs.c);
                			return;
                		}
                		
                		RD.render(<ExceptionCourses courses={ data.rows }/>, that.refs.c);
                }
            });
        },
        'render': function render() {        		
        		return (
        			<div className="history">
        				<h2>{sessionStorage.getItem('username') || '无名氏'}的刷卡记录</h2>
        				<div className="content" ref="c" id="c">
        				</div>
        				<div className="apply" ref="a" id="apply" data-cur="undefined">
        						<textarea placeholder="请写出申诉理由(不少于5个字)"></textarea>
        						<span>状态</span>
        						<input type="radio" id="statu_1" name="st" value="1"/><label htmlFor="statu_1">正常</label>
        						<input type="radio" id="statu_2" name="st" value="2"/><label htmlFor="statu_2">迟到</label>
        						<input type="radio" id="statu_3" name="st" value="3"/><label htmlFor="statu_3">请假</label>
        						<p data-type="errinfo"></p>
        						<div className="btngroup">
        							<button className="sub" onClick={ this.apply }>提交</button>
        							<button className="can" onClick={ this.cancel }>取消</button>
        						</div>
        				</div>
        			</div>
        		);
        }
    });
	
		RD.render(R.createElement(Back, null), d.getElementById('header'));
		RD.render(R.createElement(UserRecord, null), d.getElementById('history'));
})( React, ReactDOM, Zepto, document );